<template>
	<view class="wrapper" :style="'background-image: url(' + ossurl.box.arena.arenabj + ');'">
		<view class="pagae-nav" :style="{ paddingTop: statusBarHeight + 'px', background: headerBg }">
			<view class="flex-align-center relative" style="height: 80rpx">
				<text class="cuIcon-back back" @click.stop="back"></text>
				<view class="title line-ellipsis">擂台</view>
			</view>
		</view>

		<view class="field">
			<view class="center fx-c-c">
				<view class="l">
					<image :src="ossurl.box.arena.field_l" style="width: 114rpx; height: 64rpx;"></image>
				</view>
				<view class="c" :style="'background-image: url(' + ossurl.box.arena.field_c + ');'">
					<text>5人擂台pk赛（87号）</text>
				</view>
				<view class="r">
					<image :src="ossurl.box.arena.field_r" style="width: 52rpx; height: 64rpx;"></image>
				</view>
			</view>
		</view>

		<view class="personnel">
			<view class="center fx-c-c">
				<view class="item" v-for="(item,index) in 5">
					<view class="top"
						:style="true ? 'background-image: url(' + ossurl.box.arena.personnel_top1 + ');' : 'background-image: url(' + ossurl.box.arena.personnel_top2 + ');'">
						<view class="num fx-c-c">{{ index + 1 }}</view>
					</view>
					<view class="bottom">
						<image :src="ossurl.box.arena.personnel_bottom" style="width: 136rpx; height: 66rpx;"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="rule">
			<image :src="ossurl.box.arena.rule" style="width: 48rpx; height: 124rpx;"></image>
		</view>
		<prize ref="prize"></prize>
	</view>
</template>

<script>
	import empty from '@/components/empty'
	import prize from './prize'
	import ossurl from '@/utils/ossurl'
	export default {
		components: {
			empty, prize
		},
		data() {
			return {
				ossurl,
				list: [],
			}
		},
		computed: {
			headerBg() {
				return 'transparent'
			},
			statusBarHeight() {
				if (this.$store.state.systemInfo) {
					return this.$store.state.systemInfo.statusBarHeight
				}
				return 20
			}
		},
		onLoad(options) {

		},
		methods: {
			back() {
				this.$router.back()
			}
		}
	}
</script>
<style lang="scss" scoped>
	page{
		height: 100vh;
	}
	@keyframes bounce {
	  0%, 100% {
	    transform: translateY(0);
	  }
	  50% {
	    transform: translateY(-10px);
	  }
	}
	.wrapper {
		width: 100%;
		height: 100vh;
		background-repeat: no-repeat;
		background-size: cover;
		height: 100vh;
		overflow: auto;

		.rule{
			position: fixed;
			right: 0;
			top: 540rpx;
			z-index: 10;
		}
		.personnel {
			margin-top: 120rpx;

			.center {
				flex-wrap: wrap;

				.item {
					width: 33%;
					display: flex;
					justify-content: center;
					flex-direction: column;
					animation: bounce 2s infinite;
					.top {
						width: 114rpx;
						height: 114rpx;
						background-size: 100% 100%;
						margin: 0 auto;
						overflow: hidden;

						.num {
							width: 100%;
							height: 100%;
							font-size: 36rpx;
							font-weight: bold;
							color: #7A2737;
						}
					}

					.bottom {
						text-align: center;
						margin-top: -10rpx;
					}
				}
			}
		}

		.field {
			padding-top: 170rpx;
			box-sizing: border-box;

			.center {
				.l {
					margin-top: 15rpx;
				}

				.r {
					margin-top: 15rpx;
				}

				.c {
					background-repeat: repeat-x;
					padding: 0 30rpx;
					height: 64rpx;
					padding-top: 14rpx;
					box-sizing: border-box;

					text {
						color: #28DDDC;
					}
				}
			}
		}

		.pagae-nav {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			z-index: 100;
			align-items: center;

			.title {
				font-size: 30rpx;
				font-weight: bold;
				text-align: center;
				line-height: 72rpx;
				width: 500rpx;
				color: #fff;
			}

			.back {
				z-index: 1800;
				font-size: 32rpx;
				line-height: 32rpx;
				position: absolute;
				left: 20rpx;
				top: 24rpx;
				color: #fff;
			}
		}
	}
</style>